<template>
    <div>
        <div class="bg-color-box">
            <!--顶部导航栏-->
            <van-nav-bar class="nav-bar-box" :left-arrow="true" @click-left="onClickLeft">
                <div slot="left">
                    <i class="go-back-icon"></i>
                    <span class="title">二维码</span>
                </div>
            </van-nav-bar>

            <!--个人信息-->
            <div class="personal-info">
                <div class="myHeadImg" @click="clickHead()" ref="headImg">
                    <img src="../assets/images/head-portrait.png" alt="头像"/>
                </div>

                <div class="info">
                    <div>
                        <span class="name">{{$Cookies.get('personName')}}</span>
                    </div>

                    <div class="phone">
                        <span>{{$Cookies.get('personPhone')}}</span>
                    </div>
                </div>
            </div>
        </div>

        <!--我的二维码-->
        <div class="module-box my-QRCode">
            <div class="title">
                <span class="span">我的二维码</span>
            </div>

            <!--拜访二维码-->
            <div class="qrcode" ref="visitQRcode"></div>
        </div>

    </div>
</template>

<script>
    import {NavBar} from 'vant';

    export default {
        name: 'visitQRCode',

        components: {
            [NavBar.name]: NavBar,
        },

        props: {},

        data() {
            return {

            }
        },

        mounted() {
            //成生拜访二维码
			this.$nextTick(() => {
				this.showVisitQRCode();
			});

			this.getHeadImg();
        },

        methods: {
        	//获取头像
			getHeadImg(){
				if(this.$Cookies.get('headImgUrl')){
					this.$refs.headImg.innerHTML=`<img src="${this.$Cookies.get('headImgUrl')}" alt="头像"/>`
                }
			},

			//生成拜访二维码
			showVisitQRCode(){
				this.$refs.visitQRcode.innerHTML= '';   //移除老的二维码

				let text = JSON.stringify({
					QRCodeType: 'visit',
					personPhone: this.$Cookies.get('personPhone'),
					ownerName: this.$Cookies.get('visitOwnerName'),
					ownerAddress: this.$Cookies.get('visitOwnerAddress')
				});

				text = encodeURI(text);    //对二维码内容进行转码

				new this.$QRCode(this.$refs.visitQRcode, {
					text: text,
					width: 200,
					height: 200,
					colorDark: '#000000',
					colorLight: '#ffffff',
					correctLevel: this.$QRCode.CorrectLevel.M,   //容错率，L/M/H
				})
			},

            onClickLeft(){
                this.$router.go(-1);
            },
			//点击头像
			clickHead(){
				this.$router.push('/personalInfo');
			}
        },
    }
</script>

<style lang="scss" scoped>
    /*二维码样式*/
    .qrcode{
        width: 200px;
        margin: 0 auto;
        margin-top: 20px;
        display: inline-block;
    }

    /*个人信息*/
    .personal-info{
        padding: 30px;

        .info{
            display: inline-block;
            vertical-align: top;
            margin-left: 10px;
            margin-top: 2px;

            .name{
                font-size: 20px;
                font-weight: bold;
                color: white;
                vertical-align: middle;
            }
            .phone{
                font-size: 15px;
                color: white;
                margin-top: 6px;
            }
        }
    }

    /*我的二维码*/
    .my-QRCode{
        padding: 20px;
        text-align: center;

        .title{
            text-align: left;
            line-height: 30px;

            .span{
                font-size: 20px;
                font-weight: bold;
                color: #222222;
            }
        }
    }
</style>

